var assetData = [
  // 1
  {
    Input: '<input type="checkbox"/>',
    Id: 1,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "产品部",
    Name: "张三",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 2,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "销售部",
    Name: "小王",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 3,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "运营部",
    Name: "小李",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 4,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "产品部",
    Name: "小明",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 5,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "销售部",
    Name: "小红",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 6,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "运营部",
    Name: "小亮",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 7,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "产品部",
    Name: "小橙",
    Application: "2022-03-15",
  },

  // 2
  {
    Input: '<input type="checkbox"/>',
    Id: 8,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "销售部",
    Name: "张三",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 9,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "研发部",
    Name: "李四",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 10,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "推广部",
    Name: "王五",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 11,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "研发部",
    Name: "赵六",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 12,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "推广部",
    Name: "小刘",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 13,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "产品部",
    Name: "小郑",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 14,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "销售部",
    Name: "小胡",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 15,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "研发部",
    Name: "小芳",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 16,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "推广部",
    Name: "小兰",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 17,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "产品部",
    Name: "小张",
    Application: "2022-03-15",
  },
  {
    Input: '<input type="checkbox"/>',
    Id: 18,
    Employee_number: "CG20220303009",
    Asset_name: "联想ThinkPlus会议平板",
    Asset_type: "电子及通讯设备",
    Department: "销售部",
    Name: "小曾",
    Application: "2022-03-15",
  },
];
// 页码
var page = 1;
var count = 7;
// 获取tbody
var oTBody = document.querySelector("tbody");
// 获取分页容器
var oPagination = document.querySelector(".pagination");

// 给上一页下一页加事件
var oPrevPage = document.querySelector(".prevPage");
var oNextPage = document.querySelector(".nextPage");

// 搜索
var oSearchInp = document.querySelector(".searchInp");
var oSearchBtn = document.querySelector(".searchBtn");
// console.log(assetData.slice((page - 1) * count, page * count));
// 数据渲染
function renderPage() {
  // 查看搜索宽的内容
  var str = oSearchInp.value;
  var searchDataArr = [];

  if (str.trim() == "") {
    searchDataArr = assetData;
  } else {
    for (var i = 0; i < assetData.length; i++) {
      if (
        assetData[i].Name.includes(str) ||
        assetData[i].Department == str ||
        assetData[i].Employee_number == str
      ) {
        searchDataArr.push(assetData[i]);
      }
    }
  }

  oTBody.innerHTML = "";
  var renderArr = searchDataArr.slice((page - 1) * count, page * count);
  for (var i = 0; i < renderArr.length; i++) {
    var oTr = document.createElement("tr");
    oTr.innerHTML = `
    <td><input type="checkbox"></td>
    <td>${renderArr[i].Id}</td>
    <td>
        <span><a href="#">${renderArr[i].Employee_number}</a> </span>
    </td>
    <td>${renderArr[i].Asset_name}</td>
    <td>${renderArr[i].Asset_type}</td>
    <td>${renderArr[i].Department}</td>
    <td>${renderArr[i].Name}</td>
    <td>${renderArr[i].Application}</td>
    <td>
        <span class='edit'>修改</span>
        &nbsp;                        
        <span class='del'>删除</span>
    </td>
    `;
    oTBody.appendChild(oTr);
  }

  // 渲染页码
  var aPageBtn = document.querySelectorAll(".pageBtn");
  for (var i = 0; i < aPageBtn.length; i++) {
    oPagination.removeChild(aPageBtn[i].parentNode);
  }
  for (var i = 1; i <= Math.ceil(searchDataArr.length / count); i++) {
    var oLi = document.createElement("li");
    oLi.innerHTML = `<a class='pageBtn' href='#'>${i}</a>`;
    if (i == page) {
      oLi.classList.add("active");
    }
    oPagination.insertBefore(oLi, oPagination.lastElementChild);
  }
}
renderPage();

// 给分页加事件
oPagination.addEventListener("click", changePageFn);
function changePageFn() {
  if (event.target.className == "pageBtn") {
    page = event.target.innerText;
    renderPage();
  }
}

// 上一页事件
oPrevPage.addEventListener("click", prevPageFn);
function prevPageFn() {
  if (page > 1) {
    page--;
    renderPage();
  }
}
// 下一页事件
oNextPage.addEventListener("click", NextPageFn);
function NextPageFn() {
  if (page < Math.ceil(assetData.length / count)) {
    page++;
    renderPage();
  }
}

// 删除功能
oTBody.addEventListener("click", delFn);
function delFn() {
  if (event.target.className.includes("del")) {
    var id = event.target.parentNode.parentNode.children[1].innerText;
    var oConfirm = confirm("您确定要删除吗？");
    for (var i = 0; i < assetData.length; i++) {
      if (assetData[i].Id == id && oConfirm) {
        assetData.splice(i, 1);
      }
    }
  }
  renderPage();
}

oSearchBtn.addEventListener("click", searchFn);
function searchFn() {
  page = 1;
  renderPage();
}

// 模态框修改信息
oTBody.addEventListener("click", openEdit);

function openEdit() {
  // 判断事件来源
  if (event.target.className.includes("edit")) {
    $("#editModal").modal("show");
    // 确认是哪个id的数据
    var id = event.target.parentNode.parentNode.children[1].innerHTML;
    for (var i = 0; i < assetData.length; i++) {
      if (assetData[i].Id == id) {
        // 编号
        document.querySelector(".editId").value = assetData[i].Id;
        // 员工编号
        document.querySelector(".editEmployee_number").value =
          assetData[i].Employee_number;
        // 产品名
        document.querySelector(".editAsset_name").value =
          assetData[i].Asset_name;
        // 类型
        document.querySelector(".editAsset_type").value =
          assetData[i].Asset_type;
        // 部门
        document.querySelector(".editDepartment").value =
          assetData[i].Department;
        // 姓名
        document.querySelector(".editName").value = assetData[i].Name;
        // 申批日期
        document.querySelector(".editApplication").value =
          assetData[i].Application;
      }
    }
  }
}

// 修改数据
var oEditSavaBtn = document.querySelector(".editSaveBtn");
oEditSavaBtn.addEventListener("click", editSaveFn);
function editSaveFn() {
  var id = document.querySelector(".editId").value;
  for (var i = 0; i < assetData.length; i++) {
    if (assetData[i].Id == id) {
      // 编号
      assetData[i].Id = document.querySelector(".editId").value;
      // 员工编号
      assetData[i].Employee_number = document.querySelector(
        ".editEmployee_number"
      ).value;
      // 产品名
      assetData[i].Asset_name = document.querySelector(".editAsset_name").value;
      // 类型
      assetData[i].Asset_type = document.querySelector(".editAsset_type").value;
      // 部门
      assetData[i].Department = document.querySelector(".editDepartment").value;
      // 姓名
      assetData[i].Name = document.querySelector(".editName").value;
      // 申批日期
      assetData[i].Application =
        document.querySelector(".editApplication").value;
    }
  }
  // 关闭模态框
  $("#editModal").modal("hide");
  // 重新加载数据
  renderPage();
}

// 添加数据的模态框保存按钮
var oAddData = document.querySelector(".addSaveBtn");
oAddData.addEventListener("click", openAddData);
function openAddData() {
  var addId = document.querySelector(".addId").value;
  var addEmployee_number = document.querySelector(".addEmployee_number").value;
  var addAsset_name = document.querySelector(".addAsset_name").value;
  var addAsset_type = document.querySelector(".addAsset_type").value;
  var addDepartment = document.querySelector(".addDepartment").value;
  var addName = document.querySelector(".addName").value;
  var addApplication = document.querySelector(".addApplication").value;

  // 将数据插入data中
  assetData.push({
    Id: addId,
    Employee_number: addEmployee_number,
    Asset_name: addAsset_name,
    Asset_type: addAsset_type,
    Department: addDepartment,
    Name: addName,
    Application: addApplication,
  });
  // 隐藏关闭模态框
  $("#addModal").modal("hide");
  // 添加后清空数据
  document.getElementById("#formData").reset();
  // 重新加载data
  renderPage();
}

// 删除成功弹框
var oExport_box = $(".export_box");
// 全选按钮
var aChecked = document.querySelector("thead tr input");
// 表格中的checkbox
var oChecked = document.querySelectorAll("tbody tr td input");
// console.log(oChecked)

var oDelAllCheckBox = document.querySelector(".delAllCheckBox");

var checkCount = 0;

// 全选
aChecked.addEventListener("click", allCheckFn);
function allCheckFn() {
  for (var i = 0; i < oChecked.length; i++) {
    if (this.checked == true) {
      oChecked[i].checked = true;
      checkCount = oChecked.length;
      console.log(checkCount)
    } else {
      oChecked[i].checked = false;
      checkCount = 0;
      console.log(checkCount)
    }
  }
}


// 批量删除操作
oDelAllCheckBox.addEventListener("click", oDel_AllCheckBoxFn);
function oDel_AllCheckBoxFn() {
  if (checkCount == oChecked.length) {
    for (var i = 0; i < oChecked.length; i++) {
      if (oChecked[i].checked == true) {
        var oConfirm = confirm("您确定要删除几项吗？");
        for (var i = 0; i < oChecked.length; i++) {
          oChecked[i].checked = true;
          if (oConfirm) {
            assetData.splice(oChecked[i], 1);
            oChecked.checked = true
            console.log(oChecked[i].checked);

            aChecked.checked = false;
            // 躺床
            oExport_box.animate({
              height: "show",
            });
          }
        }
      }
    }
    renderPage();
  } else {
    alert("请先选择需要批量删除的数据！");
  }
}
// 隐藏删除成功弹窗
var timer = setInterval(function () {
  oExport_box.animate({
    height: "hide",
  });
}, 2000);

